<template>
  <div>
    <div id="pusher" style="width:100%;height:200px;background-color:#000000;margin:auto"></div>
  </div>
</template>

<script>
import videoAPI from '../../../../api/workAPI/videoAPI.js'
export default {
  props: ['id'],
  data () {
    return {
      videoUrl: '',
      bstart: false,
      pusher: {},
      style: {
        src: '',
        muted: false,
        autoplay: true,
      }
    }
  },
  destroyed() {
    this.closeVideo()
  },
  methods: {
    // 视频详情
    getVideoDetails() {
      videoAPI.getVideoDetails(this.id).then(res => {
        this.style.src = res.serialNumber
        this.pusher = new plus.video.VideoPlayer("pusher", this.style);
        if (this.bstart) {
          this.pusher.pause();
          this.bstart = false;
        } else {
          this.pusher.play()
          this.bstart = true;
        }
      })
    },
    // 关闭二维码
    closeVideo() {
      this.pusher.close();
    }
  },
  mounted() {
    this.getVideoDetails()
  }
}
</script>
<style scoped>
input {
  width: 70%;
  font-size: 16px;
  padding: 0.2em 0.2em;
  border: 1px solid #00b100;
  -webkit-user-select: text;
}
.button,
button {
  width: 20%;
  margin: 6px 0 6px 6px;
  font-size: 16px;
  color: #fff;
  background-color: #00cc00;
  border: 1px solid #00b100;
  padding: 0.2em 0em;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
</style>
